<template>
  <div>
    <a-drawer :title="title" placement="right" closable :visible="visible" width="90%" @close="onClose">
      <a-table
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :rowKey="row => row.Id"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: '4%',
          getCheckboxProps: getCheckboxProps
        }"
        :pagination="false"
        bordered
        size="small"
      >
        <template slot="operation" slot-scope="text, record, index">
          <!-- v-if="record.Nums!=0" -->
          <a @click="infoOpen(record, 2)" v-if="record.Nums != 0">物品补打</a>
          <a-divider type="vertical" v-if="record.packnums != 0" />
          <a @click="infoOpen(record, 3)" v-if="record.packnums != 0">包码补打</a>
        </template>
        <template slot="DyNums" slot-scope="text, record">
          <!-- {{text}} -->
          <a-input class="Bei" size="small" v-model="record.DyNums" style="height:30px"></a-input>
        </template>
        <template slot="IsSingle" slot-scope="text, record">
          {{ text ? '是' : '否' }}
        </template>
      </a-table>
      <div style="height: 53px"></div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
        <a-button :style="{ marginRight: '8px' }" @click="printdata(1)" type="primary" v-if="!printshow">打印</a-button>
      </div>

      <!-- 详细信息列表 -->
      <a-drawer :title="titleinfo" placement="right" closable :visible="visibleinfo" width="50%" @close="onCloseinfo">
        <a-table
          :columns="titleinfo == '物品补打' ? columnsinfoM : columnsinfoB"
          :data-source="datainfo"
          :loading="loadinginfo"
          :rowKey="row => row.Id"
          :rowSelection="{ selectedRowKeys: selectedRowKeysinfo, onChange: onSelectChangeinfo }"
          :pagination="false"
          bordered
          size="small"
        >
          <template slot="Ids" slot-scope="text, record, index">
            {{ record.QrCode.split(',')[1] }}
          </template>
        </a-table>
        <div style="height: 53px"></div>

        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onCloseinfo">取消</a-button>
          <a-button :style="{ marginRight: '8px' }" @click="infoprint" type="primary">打印</a-button>
        </div>
      </a-drawer>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      columns: [
        {
          title: '物品编码',
          dataIndex: 'MaterialCode',
          width: '18%',
          ellipsis: true,
          scopedSlots: { customRender: 'MaterialCode' }
        },

        {
          title: '物品名称',
          dataIndex: 'MaterialName'
          // width: '33%'
          // scopedSlots: { customRender: 'MaterialName' }
        },
        {
          title: '数量',
          align: 'right',
          dataIndex: 'RecNum',
          // scopedSlots: { customRender: 'DyNums' },
          width: '10%'
        },
        {
          title: '是否单个物品',
          dataIndex: 'IsSingle',
          align: 'center',
          scopedSlots: { customRender: 'IsSingle' },
          width: '120px'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '15%',
          align: 'left',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      id: '',
      loading: false,
      visible: false,
      data: [],
      selectedRowKeys: [],
      printshow: false,
      //详细信息
      columnsinfoM: [
        {
          title: '物品编号',
          dataIndex: 'Id',
          ellipsis: true,
          scopedSlots: { customRender: 'Ids' }
        },
        {
          title: '物品编码',
          dataIndex: 'MaterialCode',
          ellipsis: true
        },
        {
          title: '物品名称',
          dataIndex: 'MaterialName'
        }
      ],
      columnsinfoB: [
        {
          title: '包编号',
          dataIndex: 'Id',
          ellipsis: true,
          scopedSlots: { customRender: 'Ids' }
        },
        {
          title: '包名称',
          dataIndex: 'BoxName',
          ellipsis: true
        }
      ],
      visibleinfo: false,
      loadinginfo: false,
      titleinfo: '',
      datainfo: [],
      selectedRowKeysinfo: []
    }
  },
  methods: {
    getCheckboxProps(row) {
      console.log(row)
      return {
        props: {
          disabled: row.Nums != 0
        }
      }
    },
    BoxPrint() {
      //包码补打
    },
    MaterialPrint() {},
    infoprint() {
      //详细信息补打打印
      console.log(this.titleinfo)
      var str = ''
      if (this.titleinfo == '物品补打') {
        str = 'PB/PB_Purchase/PrintPurchaseJobBookingQrCode'
      } else {
        str = 'PB/PB_Purchase/PrintPurchasePackList'
      }
      this.loadinginfo = true
      this.$http
        .post(str, {
          PurchaseId: this.id,
          nums: this.selectedRowKeysinfo
        })
        .then(res => {
          this.loadinginfo = false
          if (res.Success) {
            this.$message.success('打印成功')
            this.visibleinfo = false
          } else {
            this.$message.error(res.Msg)
          }
        })
    },
    onSelectChangeinfo(list) {
      this.selectedRowKeysinfo = list
    },
    onCloseinfo() {
      this.visibleinfo = false
    },
    getinfoBox(id) {
      this.loadinginfo = true
      this.$http.post(`PB/PB_Purchase/GetPurchasePackList?PurchaseId=${this.id}&MaterialId=${id}`, {}).then(res => {
        this.loadinginfo = false
        if (res.Success) {
          this.datainfo = res.Data
        } else {
          this.$message.error(res.Msg)
        }
      })
    },
    getinfoMaterial(id) {
      this.loadinginfo = true
      this.$http
        .post('PB/PB_Purchase/GetPurchaseDetailJobBookingQrCode', {
          Search: {
            MaterialId: id,
            PurchaseId: this.id
          },
          PageIndex: 1,
          PageRows: 100
        })
        .then(res => {
          this.loadinginfo = false
          if (res.Success) {
            this.datainfo = res.Data
          } else {
            this.$message.error(res.Msg)
          }
        })
    },
    getDataListInfo(id, type) {
      //详细信息列表
      if (type == 2) {
        this.titleinfo = '物品补打'
        this.getinfoMaterial(id)
      } else {
        this.titleinfo = '包码补打'
        this.getinfoBox(id)
      }
    },
    infoOpen(row, type) {
      this.datainfo = []
      this.selectedRowKeysinfo = []
      this.getDataListInfo(row.MaterialId, type)
      this.visibleinfo = true
    },
    printdata(num) {
      //列表打印
      if (this.selectedRowKeys.length == 0) {
        this.$message.error('请选择后打印')
        return
      }
      this.loading = true
      this.$http
        .post('PB/PB_Purchase/PrintPurchase', {
          PurchaseId: this.id,
          liststr: this.selectedRowKeys
        })
        .then(res => {
          this.loading = false
          if (res.Success) {
            this.$message.success('打印成功')
            this.visible = false
          } else {
            this.$message.error(res.Msg)
          }
        })
    },
    onSelectChange(RowKeys, row) {
      this.selectedRowKeys = RowKeys
    },
    onClose() {
      this.visible = false
    },
    getDataList(id) {
      //列表信息
      this.loading = true
      this.$http.post('PB/PB_Purchase/GetPurchaseDetailList?PurchaseId=' + id, {}).then(res => {
        this.loading = false
        if (res.Success) {
          this.data = res.Data
          this.printshow = this.data.every(item => {
            return item.Nums != 0
          })
        } else {
          this.$message.error(res.Msg)
        }
      })
      // this.data = [{
      //   MaterialCode: '123',
      //   MaterialName: '物品名称',
      //   RecNum: '10',
      //   IsSingle: true

      // }]
    },
    openForm(id, title) {
      this.init()
      this.id = id
      this.title = title
      this.visible = true
      this.getDataList(id)
    },
    init() {
      this.data = []
      this.selectedRowKeys = []
    }
  }
}
</script>

<style lang="less" scoped></style>
